<!--
* @author wn
* @date 2022/09/26 11:11:00
* @description: 详情页  物流组件   显示第一条物流信息   采用 异步组件实现
* 异步组件 会 异步执行  迫使 setup 晚于 模版初始化执行 原本应早于
* suspense 组件 包裹  使该组件 晚于 setup 这样就正常了
!-->
<template>
	<div class="detail-logistics" v-if="logistics">
		<span>{{ logistics.list[0].time }}</span>
		<span>{{ logistics.list[0].text }}</span>
		<a @click="onLogistics(order)" href="javascript:;">查看物流</a>
	</div>
	<!-- 查看物流组件 -->
	<order-logistics ref="targetLogistics" />
</template>
<script>
import { logisticsOrder } from '@/network/order'
import OrderLogistics from './OrderLogistics'
import { ref } from 'vue'
import { useOnLogistics } from '../index.vue'
export default {
	name: 'DetailLogistics',
	components: { OrderLogistics },
	props: {
		order: {
			type: Object,
			default: () => ({}),
		},
	},
	async setup(props) {
		// 物流信息
		const logistics = ref(null)
		try {
			const { result } = await logisticsOrder(props.order.id)
			logistics.value = result
		} catch (error) {
			logistics.value = {
				list: [
					{
						text: '没有发货没有物流信息',
						time: '2022-09-26',
					},
				],
			}
		}
		// 查看物流组件   函数 获得 { onLogistics, targetLogistics }
		return { logistics, ...useOnLogistics() }
	},
}
</script>
<style scoped lang="less">
.detail-logistics {
	display: flex;
	align-items: center;
	height: 50px;
	background-color: #f5f5f5;
	padding: 0 30px;
	margin: 30px 50px 0;
	span {
		color: #999;
		&:first-child {
			margin-right: 30px;
		}
		&:last-of-type {
			flex: 1;
		}
	}
	a {
		color: @xtxColor;
	}
}
</style>
